<template>
    <div class="page-box">
        <div class="page-search">

            <div>
                <label>分类名称</label>
                <el-input v-model="searchForm.ItemTypeName" style="width: 160px;"></el-input>
            </div>
            <div>
                <label>产品/物料</label>
                <el-select v-model="searchForm.ItemOrProduct" placeholder="请选择产品/物料">
                    <el-option label="产品" value="产品"></el-option>
                    <el-option label="物料" value="物料"></el-option>
                </el-select>
            </div>

            <div>
                <label>是否启用</label>
                <el-select v-model="searchForm.EnableFlag" placeholder="请选择是否启用">
                    <el-option label="是" value="Y"></el-option>
                    <el-option label="否" value="N"></el-option>
                </el-select>
            </div>
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="page-section">
            <div class="page-tool">
                <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
                <el-button type="danger" plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>

                <el-dropdown class="mg-l">
                    <el-button size="small" type="primary" plain>
                        <i class="el-icon-s-grid"></i> 
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>


            <!--表单-->
            <el-table :data="tableData" row-key="Id" default-expand-all
             :tree-props="{ children: 'Children', hasChildren: 'hasChildren' }" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column fixed prop="ItemTypeName" label="分类名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ItemOrProduct" label="物料/产品" :show-overflow-tooltip="true"></el-table-column>

                <el-table-column prop="EnableFlag" label="是否启用" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.EnableFlag == 'Y'">是</el-tag>
                        <el-tag type="warning" v-else>否</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="CreateTime" label="创建时间" :show-overflow-tooltip="true"></el-table-column>


                <el-table-column label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="text" @click="update(scope.row)">编辑</el-button>
                        <el-button type="text" @click="dels(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--弹窗-->
        <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
            width="50%" @close="closeDialog">
            <ItemTypeInput :model="model" :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible" />
        </el-dialog>

    </div>
</template>
<script>
//弹窗
import ItemTypeInput from './components/ItemTypeInput.vue';
export default {
    components: {
        ItemTypeInput
    },
    data() {
        return {
            //搜索字段
            searchForm: {
                ItemTypeName: '',
                ItemOrproduct: '',
                EnableFlag: '',
            },
            //弹出对话框
            dialogDomain: {
                title: '新增类别',
                dialogVisible: false
            },
            isUpdate: false,

            //数据模型
            model: {
                ItemTypeCode: '',//产品编码
                ItemOrProduct: '产品',//产品物料标识
                ItemTypeName: '',//产品物料类型名称
                ParentTypeId: 0,//父级id
                EnableFlag: 'Y',//是否启用
            },

            isLoading: false,
            tableData: [],
            defaultProps: {
                children: 'Children',
                lable: 'ItemTypeName'
            }
        }
    },
    mounted() {
        this.dataBind();
    },
    methods: {
        add() {
            this.isUpdate=false;
            this.dialogDomain.title = "新增类别";
            this.dialogDomain.dialogVisible = true;
        },

        dels() {
            if (this.$refs.dataForm.selection.length <= 0) {
                this.showNotify('请先选择一项')
                return;
            }
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {

                    //获取选中的表格数据 并筛选id
                    var ids = this.$refs.dataForm.selection.map(x => x.Id)

                    //拼接参数
                    let params = new URLSearchParams();
                    params.append('ids', ids.join(','))

                    this.$http.delete('/api/ItemType/DelAll', {
                        data: params,
                        headers: {
                            'content-Type': 'application/x-www-form-urlencoded'
                        },
                        loading: this.$loading()
                    })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { });
        },
        del(model) {
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http.delete('/api/ItemType/', {
                        data: {
                            id: model.Id
                        },
                        headers: {
                            'content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { });
        },
        update(model) {
            console.log(model);
            this.model = model;
            this.isUpdate = true;

            this.dialogDomain.title = "编辑类别";
            this.dialogDomain.dialogVisible = true;
        },

        dataBind() {
            this.isLoading = true;
            this.$http.get('/api/ItemType/GetAll', {
                params: {
                    ItemOrProduct: this.searchForm.ItemOrProduct,
                    ItemTypeName: this.searchForm.ItemTypeName,
                    EnableFlag: this.searchForm.EnableFlag
                }
            })
                .then((res) => {
                    this.tableData = res.Data;
                    this.isLoading = false;
                })
        },


        //导出
        exports(){
            this.$confirm('即将导出报表，是否继续？', '系统提示', {
                confirmButtonText: '导出',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.request({
                    method: "GET",
                    loading:this.$loading(),
                    url: "/api/ItemType/Export",
                    responseType: 'blob'
                }).then((res)=>{
                    const blob = new Blob([res])
                    const downloadElement = document.createElement('a');
                    const href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = '设备类型信息.xls'; //下载后文件名
                    downloadElement.click(); //点击下载
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
                

            }).catch((err)=>{
                console.log(err);
            })

        },

        //对话框关闭事件
        closeDialog() {
            this.model = {
                ItemTypeCode: '',//产品编码
                ItemOrProduct: '产品',//产品物料标识
                ItemTypeName: '',//产品物料类型名称
                ParentTypeId: 0,//父级id
                EnableFlag: 'Y',//是否启用
            }
        },
        search() {
            this.dataBind();
        },
        reset() {
            this.searchForm.ItemOrProduct = '';
            this.searchForm.ItemTypeName = '';
            this.searchForm.EnableFlag = '';
        },
        //新增编辑页面回调
        callback() {
            this.dialogDomain.dialogVisible = false;
            this.dataBind();
        }
    }

}


</script>
<style scoped></style>